<template>
  <div class="wrap">
      <div>1</div>
      <div>2</div>
      <div>3</div>
       <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>
          9
        </div>
  </div>
</template>

<script>
export default {
  name: 'Vuepro2209Index',

  data() {
    return {
      
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>
<style lang="less">
    .wrap{
      
      width:100vw;
      display:grid;
      height:100vh;
      background:skyblue;
      font-size:40px;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows:1fr 1fr 1fr;
      
      // grid-template-areas: 
      //                 "a a a"
      //                 "b b b"
      //                 "c c c";
      text-align:center;
      >div{
        box-sizing:border-box;
        border:2px solid red;
        &:nth-child(2){
           grid-column: 2 / 3; // 以列网格线为基准
           grid-row: 1 / 3; // 以行网格线为基准
           background:red;
        }
      }
    }
</style>